<template>
  <div style="header-box">
    <div v-show="list.length>1" class="c-header-crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="(l,i) in list" :key="i" :to="l">{{ l.title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>

</template>
<script>
// import { deepClone } from '@/utils'
export default {
  name: 'CHeaderCrumbs',
  props: {
    goto: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
    }
  },
  computed: {
    list() {
      const t = []
      const matched = this.$route.matched
      for (let i = 0; i < matched.length; i++) {
        const m = matched[i]
        t.push({
          name: m.name,
          title: (m.meta || {}).title
        })
      }
      return t
    }
  },
  methods: {
    goBack() {
      this.$router.push(this.goto)
    }
  }
}
</script>
<style lang="scss">
.header-box{
  position: fixed;
  height: 200px;
  background-color: red;
  .c-header-crumbs{
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-breadcrumb__inner{
    color: #3dc094;
    font-size: 12px;
  }
}
}
// .c-header-crumbs{
//   padding: 10px;
//   border-bottom: 1px solid #f0f0f0;
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   .el-breadcrumb__inner{
//     color: #3dc094;
//     font-size: 12px;
//   }
// }
</style>
